<template>
    <el-container>
        <el-header>
            <cli-title-student></cli-title-student>
        </el-header>
        <el-main>
            <el-row class="center">
                <el-row type="flex" justify="space-between">
                    <el-col style="width: 400px">
                        <calendar></calendar>
                    </el-col>
                    <el-col style="width: 200px">
                        <el-row>
                            <el-date-picker
                                    style="margin-top: 50px"
                                    v-model="value1"
                                    type="date"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                            <el-time-select
                                    style="margin-top: 50px"
                                    v-model="value2"
                                    :picker-options="{
                                        start: '08:00',
                                        step: '01:00',
                                        end: '20:00'
                                      }"
                                    placeholder="选择时间">
                            </el-time-select>
                            <el-input style="margin-top: 50px" v-model="input" placeholder="请输入课程内容"></el-input>
                        </el-row>
                        <el-row>
                            <el-button @click="conform" style="margin-top: 30px">确定</el-button>
                        </el-row>
                    </el-col>
                    <el-col style="width: 400px">
                        <teacher-info :message="this.teacherId"></teacher-info>
                    </el-col>
                </el-row>
            </el-row>
        </el-main>
        <el-footer>
            <page-footer></page-footer>
        </el-footer>
    </el-container>
</template>

<script>
    import CliTitleStudent from "../../../components/base/cliTitleStudent";
    import pageFooter from "../../../components/base/pageFooter";
    import calendar from "../../../components/calendar"
    import teacherInfo from "../../../components/info/teacherInfo"
    import Cookies from "js-cookie"
    import POST from "../../../api/POST";

    export default {
        name: "appointment",
        components: {teacherInfo, calendar, pageFooter, CliTitleStudent},
        data() {
            return {
                info: [],
                teacherId: '',
                input: '',
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now();
                    },
                },
                value1: '',
                value2: '',
                date: '',
            }
        },
        created() {
            this.teacherId = this.$route.params.teacherId;
            console.log(this.teacherId)
        },
        methods: {
            conform() {
                this.info = Cookies.get('info');
                this.info = JSON.parse(this.info);
                console.log(this.info);
                if (this.info.role === 0) {
                    if(this.value1 === '' || this.value2 === ''){
                        this.$message({
                            type: 'info',
                            message: '请选择有效时间！'
                        });
                    } else if(this.input === ''){
                        this.$message({
                            type: 'info',
                            message: '请输入课程内容！'
                        });
                    }
                    else{
                        let data = {
                            'student_id': this.info.account,
                            'teacher_id': this.teacherId,
                            'reservation_content': this.input,
                            'time': this.value1 + ' ' + this.value2,
                        };
                        POST.createReservation(data).then(res => {
                            if (res.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '预约成功'
                                });
                            }
                        })
                    }
                } else {
                    this.$message({
                        type: 'info',
                        message: '老师不可以预约哦！'
                    });
                }
            },
        }
    }
</script>

<style scoped>
    .center {
        width: 1200px;
        margin: 0 auto;
    }
</style>